<template>
  <div class="edit">
    <!-- 头部导航栏 -->
    <nav>
      <ul>
        <li class="set">
          <i class="iconfont iconhome" @click="onClickLeft"></i>
          <span class="car">购物车</span>
          <span v-if="flag" @click="del">删除</span>
          <span v-if="!flag">&nbsp;</span>
        </li>
      </ul>
    </nav>

    <!-- 承担运费 -->
    <section>
      <van-checkbox
        v-model="checkedFreight"
        checked-color="#c03131"
        class="freight"
        icon-size="16px"
      ></van-checkbox>
      <span>商城承担运费</span>
    </section>

    <!-- 购物车列表 -->
    <div style="padding-bottom:100px;" v-if="list.length">
      <main v-for="(item,index) in list" :key="index">
        <van-checkbox
          v-model="item.checked"
          checked-color="#c03131"
          icon-size="16px"
          @change="select"
        ></van-checkbox>
        <img @click="orderdetail(item.productId)" :src="item.imgUrl" />
        <div class="main-right">
          <p class="cartSku" @click="orderdetail(item.productId)">{{item.masterName}}/p></p>
          <p class="priceall">
            <span>&yen; {{item.price/100}}</span>
            <span>&nbsp;</span>
            <span class="Number">
              <van-stepper
                v-model="item.buyNum"
                @change="number(item)"
                :disabled="!item.checked"
                min="0"
              />
            </span>
          </p>
        </div>
      </main>
    </div>
    <div v-else>
      <img src="@/assets/img/cart2.png" alt class="backimg" />
    </div>



    
    <!-- 结算 -->
    <footer class="footer">
      <van-submit-bar :price="money?money:0" button-text="结算" @submit="onSubmit">
        <div class="aaa">
          <van-checkbox
            v-model="allchecked"
            @click="checkedAll"
            checked-color="#c03131"
            icon-size="16px"
          >全选</van-checkbox>
        </div>
      </van-submit-bar>
    </footer>
    <Footer :numbers="numbers"></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";
export default {
  data() {
    return {
      checkedFreight: true,
      allchecked: false,
      list: [],
      id: "",
      submitList: [],
      flag: false,
      numbers: 0
    };
  },
  components: {
    Footer
  },
  computed: {
    money() {
      let moneyList = this.list.filter(item => {
        this.getAllList();
        return item.checked;
      });
      let num = 0;
      moneyList.forEach(item => {
        num += item.price * item.buyNum;
      });

      return num;
    }
  },
  methods: {
    del() {
      this.$dialog
        .confirm({
          title: "移除购物车",
          message: "是否移除购物车"
        })
        .then(() => {
          this.checkedList.forEach(item => {
            if (!this.submitList.includes(item.cartId)) {
              this.submitList.push(item.cartId);
            }
          });
          let url = "/cart/del";
          let data = {
            cartId: this.submitList
          };
          this.$axios
            .post(url, data)
            .then(res => {
              this.submitList = [];
              this.checkedAll()
              this.getAllList();
              this.getList();
            })
            .catch(err => {});
        });
    },
    number(item) {
      if (!item.buyNum) {
        this.$dialog
          .confirm({
            title: "移除商品？",
            message: "确认是否移除该商品？"
          })
          .then(() => {
            let url = "/cart/del";
            let data = {
              cartId: item.cartId
            };
            this.$axios
              .post(url, data)
              .then(res => {
                this.getList();
              })
              .catch(err => {
                console.log("err", erre);
              });
          })
          .catch(() => {
            this.getList();
          });
      } else {
        let url = "/cart/updateNum";
        let { cartId, buyNum } = item;
        let data = {
          cartId,
          buyNum
        };
        this.$axios.post(url, data).then(res => {
          this.getAllList();
        });
      }
    },
    getAllList() {
      let url = "/cart/all";
      this.$axios
        .get(url)
        .then(res => {
          let arr = res.list;
          let newnum = 0;
          arr.forEach(i => {
            newnum += i.buyNum;
          });
          this.numbers = newnum;
        })
        .catch(err => {
          console.log(err);
        });
    },

    checkedAll() {
      this.list = this.list.map(item => {
        return {
          ...item,
          checked: !this.allchecked
        };
      });
    },
    select() {
      this.checkedList = this.list.filter(item => {
        return item.checked;
      });
      if (this.money) {
        this.flag = true;
        if (this.checkedList.length === this.list.length) {
          this.allchecked = true;
        } else {
          this.allchecked = false;
        }
      } else {
        this.flag = false;
        this.allchecked = false;
      }
    },
    onClickLeft() {
      this.$router.push("/home");
    },

    onSubmit() {
      if (this.money) {
        this.checkedList.forEach(item => {
          if (!this.submitList.includes(item.productId)) {
            this.submitList.push(item.productId);
          }
        });
        this.$router.push({
          path: `/order/submit/${this.submitList}/${1}`
        });
      } else {
        this.$dialog({ message: "请选择需要购买的商品" });
      }
    },
    orderdetail(id) {
      this.$router.push(`/list/${id}`);
    },
    getList() {
      let url = "/cart/all";
      this.$axios.get(url).then(res => {
        this.list = res.list.map(item => {
          return {
            ...item,
            checked: false
          };
        });
      });
    }
  },

  created() {
    this.getList();
  }
};
</script>
<style lang="less" scoped>
.backimg {
  width: 375px;
  position: fixed;
  top: 25%;
}
.edit {
  // 头部导航栏
  background-color: #f4f4f4;
  height: 100vh;
  nav {
    padding-top: 44px;
    .set {
      box-sizing: border-box;
      padding: 0px 15px;
      height: 44px;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
      background-color: white;
      border-bottom: #f4f4f4 1px solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
      i {
        font-size: 19px;
        transform: translate(-3px, 0px);
      }
      .car {
        font-size: 17px;
        transform: translate(-5px);
      }
      span:last-child {
        font-size: 15px;
      }
    }
  }

  // 承担运费
  section {
    // margin-top: 88px;
    display: flex;
    line-height: 44px;
    height: 44px;
    border-bottom: 1px solid #f4f4f4;
    background: white;
    box-sizing: border-box;
    padding: 0px 15px;
    .freight {
      margin-right: 15px;
    }
    span {
      font-size: 15px;
      color: #191a1b;
    }
  }

  // 购物车列表
  main {
    display: flex;
    align-items: center;
    background: white;
    height: 94px;
    padding: 15px;
    //
    img {
      width: 95px;
      height: 95px;
      margin: 0px 15px;
      display: inline-block;
      background-color: #f8f8f8;
    }
    .main-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 94px;
      .cartSku {
        width: 200px;
        height: 21px;
        font-size: 15px;
        line-height: 21px;
        color: #2e2f30;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .priceall {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: relative;
        span:first-child {
          color: #c03131;
          font-size: 15px;
        }
        span:nth-child(2) {
          font-size: 11px;
          color: #bdc0c5;
          text-decoration: line-through;
          position: absolute;
          top: 50%;
          left: 50px;
          transform: translate(0px, -50%);
        }
        span:last-child {
          color: #bdc0c5;
          font-size: 13px;
        }
      }
    }
  }

  // 结算
  .footer {
    .van-submit-bar__bar {
      width: 100%;
      position: fixed;
      left: 0px;
      bottom: 49px;
      background: white;
      border-bottom: 1px solid #f2f2f2;
    }
    .van-checkbox {
      margin-left: 10px;
    }
  }
}
</style>